<template>
  <view class="index_warp">
    <view class="top_back_warp">
      <image src="@/static/images/my_top_back.png" />
      <view class="test_warp">
        <view class="test">
          <view class="user_icon" @click="upImg">
            <image
              class="avatarUrl"
              v-if="user.avatarUrl"
              :src="user.avatarUrl"
            />
            <image v-else src="@/static/images/nologin.png" />
          </view>
          <view v-if="user.token" class="wxname">{{ user.nickName }} </view>
          <button class="login_title" v-else @click="toLogin">登录</button>
        </view>
        <view class="setUp_icon" v-if="user.token" @click="clickShowModal">
          <image src="@/static/images/editor.png" />
        </view>
      </view>
    </view>
    <view class="warp">
      <view class="distribution" @click="clickItemTo('my_distribution')">
        <view class="distribution_image">
          <image src="@/static/images/distribution.png" />
        </view>
        <view class="distribution_title">我的分销</view>
      </view>
      <view
        class="distribution"
        style="margin-top: 30upx"
        @click="clickItemTo('gold_pay')"
      >
        <view class="distribution_image">
          <image src="@/static/images/jfcz.png" />
        </view>
        <view class="distribution_title">积分充值</view>
      </view>
      <view class="my_warp">
        <!-- <view class="item" @click="clickItemTo('my_order')">
          <view class="item_image">
            <image src="@/static/images/order.png" />
          </view>
          <view class="item_right">
            <view class="distribution_title">我的订单</view>
            <view class="iconfont icon-right" />
          </view>
        </view> -->
        <view class="item" @click="clickItemTo('my_course')">
          <view class="item_image">
            <image src="@/static/images/course.png" />
          </view>
          <view class="item_right">
            <view class="distribution_title">我的课程</view>
            <view class="iconfont icon-right" />
          </view>
        </view>
        <view class="item" @click="clickItemTo('my_collection')">
          <view class="item_image">
            <image src="@/static/images/collection.png" />
          </view>
          <view class="item_right">
            <view class="distribution_title">我的收藏</view>
            <view class="iconfont icon-right" />
          </view>
        </view>
        <view class="item" @click="clickItemTo('my_problem')">
          <view class="item_image">
            <image src="@/static/images/Problem_sets.png" />
          </view>
          <view class="item_right">
            <view class="distribution_title">我的做题</view>
            <view class="iconfont icon-right" />
          </view>
        </view>
        <view class="item" @click="clickItemTo('my_book')">
          <view class="item_image">
            <image src="@/static/images/books.png" />
          </view>
          <view class="item_right">
            <view class="distribution_title">我的书籍</view>
            <view class="iconfont icon-right" />
          </view>
        </view>
      </view>
      <view class="my_warp">
        <!-- <view class="item" @click="clickItemTo('message')">
          <view class="item_image">
            <image src="@/static/images/message.png" />
          </view>
          <view class="item_right">
            <view class="distribution_title">消息</view>
            <view class="iconfont icon-right" />
          </view>
        </view> -->
        <view class="item" @click="clickItemTo('setting')">
          <view class="item_image">
            <image src="@/static/images/setUp.png" />
          </view>
          <view class="item_right">
            <view class="distribution_title">设置</view>
            <view class="iconfont icon-right" />
          </view>
        </view>
        <view class="item" @click="clickItemTo('feedback')">
          <view class="item_image">
            <image src="@/static/images/feedback.png" />
          </view>
          <view class="item_right">
            <view class="distribution_title">意见反馈</view>
            <view class="iconfont icon-right" />
          </view>
        </view>
      </view>

      <view
        class="distribution_flex"
        style="margin-top: 30upx; margin-bottom: 30upx"
      >
        <view class="left_warp">
          <view class="distribution_title">输入邀请码</view>
          <view class="distribution_title_grey">如果没有可以不填哦</view>
        </view>
        <view class="distribution_btn" @click="openModal">立即填写</view>
      </view>
      <!-- 邀请码 -->
      <u-mask :show="isOpen" @click="isOpen = false" :mask-click-able="false">
        <view class="warp">
          <view class="rect" @click.stop>
            <view class="title">请输入邀请码</view>
            <input type="text" v-model="inviteCode" placeholder="邀请码" />
            <view class="btn_warp">
              <view class="btn left" @click="closeModal">取消</view>
              <view class="btn right" @click="confirm">确定</view>
            </view>
          </view>
        </view>
      </u-mask>
      <!-- 修改用户名 -->
      <u-modal
        v-model="isshowModal"
        ref="uModal"
        title="请输入用户名"
        :asyncClose="true"
        :closeOnClickOverlay="true"
        @confirm="chanageUserName"
      >
        <input class="modal_input" v-model="user.nickName" />
      </u-modal>
    </view>
  </view>
</template>

<script>
import { saveInviteCode, savePersonalInfo } from "@/api/user";
import { chooseImage } from "@/utils/util";
import config from "@/config";
export default {
  data() {
    return {
      isOpen: false,
      inviteCode: "",
      isshowModal: false,
    };
  },
  computed: {
    user() {
      return this.$store.state.user.user;
    },
  },
  methods: {
    // 上传用户头像
    upImg() {
      chooseImage().then((res) => {
        const image = new Image();
        image.src = res[0];
        image.onload = () => {
          const base64 = this.getBase64Image(image);
          const params = {
            avatarPath: base64,
          };
          this.savePersonalInfo(params);
        };
        // uni.uploadFile({
        //   url: config.baseUrl, //服务器地址
        //   fileType: "image", //ZFB必填,不然报错
        //   filePath: res[0], //这个就是我们上面拍照返回或者先中照片返回的数组
        //   name: "file",
        //   success: (uploadFileRes) => {
        //     console.log("uploadFileRes", uploadFileRes);
        //     const params = {
        //       avatarPath: res[0],
        //     };
        //     this.savePersonalInfo(params);
        //   },
        // });
      });
    },
    getBase64Image(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
      var dataURL = canvas.toDataURL("image/" + ext);
      return dataURL;
    },
    // 修改用户名称
    chanageUserName() {
      const params = {
        nickName: this.user.nickName,
      };
      this.savePersonalInfo(params);
    },
    // 修改用户头像或名称
    savePersonalInfo(params) {
      savePersonalInfo(params)
        .then((res) => {
          this.$ShowToast({
            title: "修改成功",
          });
          this.isshowModal = false;
          this.$store.dispatch("user/setUser", this.user);
        })
        .catch((err) => {
          this.isshowModal = false;
        });
    },
    // 打开modal
    clickShowModal() {
      this.isshowModal = true;
    },
    // 跳转
    clickItemTo(path) {
      const url = `/pages/${path}/${path}`;
      this.$u.route({
        url,
      });
    },
    // 去登陆
    toLogin() {
      this.$u.route("/pages/login/login");
    },
    // 邀请码相关
    openModal() {
      this.isOpen = true;
    },
    closeModal() {
      this.isOpen = false;
    },
    confirm() {
      this.closeModal();
      this.$ShowModal({
        title: "是否提交",
      }).then((res) => {
        if (!res) {
          this.openModal();
        } else {
          saveInviteCode({
            inviteCode: this.inviteCode,
          }).then((res) => {
            console.log(res);
          });
          this.closeModal();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.index_warp {
  width: 100%;

  .top_back_warp {
    width: 100%;
    height: 270upx;
    position: relative;

    .test_warp {
      position: absolute;
      top: 100upx;
      left: 30upx;
      width: 690upx;
      height: 220upx;
      background: #ffffff;
      box-shadow: 0px 6upx 12upx rgba(0, 122, 255, 0.05);
      opacity: 1;
      border-radius: 20upx;
      padding: 45upx 40upx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .setUp_icon {
        width: 48upx;
        height: 48upx;
      }

      .test {
        display: flex;
        align-items: center;

        .user_icon {
          width: 130upx;
          height: 130upx;
          background: #d5d5db;
          border-radius: 50%;
          overflow: hidden;
          opacity: 1;
          display: flex;
          align-items: center;
          justify-content: center;

          image {
            width: 45%;
            height: 50%;
          }

          .avatarUrl {
            width: 100%;
            height: 100%;
          }
        }

        .login_title {
          margin-left: 30upx;
          // height: 56upx;
          font-size: 40upx;
          font-weight: 800;
          // line-height: 56upx;
          background-color: #fff;
          border: 2upx solid #fff;
          padding: 0 30upx;
        }

        .wxname {
          margin-left: 30upx;
          height: 56upx;
          font-size: 40upx;
          font-weight: 800;
          line-height: 56upx;
          background-color: #fff;
        }
      }
    }
  }

  .warp {
    padding: 0 30upx;

    .distribution {
      margin-top: 82upx;
      padding: 26upx 18upx;
      width: 690upx;
      height: 100upx;
      background: #ffffff;
      box-shadow: 0px 6upx 12upx rgba(0, 122, 255, 0.05);
      opacity: 1;
      border-radius: 20upx;
      display: flex;
      align-items: center;

      .distribution_image {
        width: 48upx;
        height: 48upx;
      }

      .distribution_title {
        margin-left: 22upx;
        height: 42upx;
        font-size: 30upx;
        font-weight: 800;
        line-height: 42upx;
      }
    }

    .my_warp {
      margin-top: 30upx;
      padding: 0 18upx;
      width: 690upx;
      background: #ffffff;
      box-shadow: 0px 6upx 12upx rgba(0, 122, 255, 0.05);
      opacity: 1;
      border-radius: 20upx;

      .item {
        display: flex;
        align-items: center;
        height: 100upx;
        position: relative;

        .item_image {
          width: 48upx;
          height: 48upx;
          flex-shrink: 0;
        }

        .item_right {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 30upx 0;
          border-bottom: 2upx solid #eee;

          .distribution_title {
            margin-left: 22upx;
            height: 42upx;
            font-size: 30upx;
            font-weight: 800;
            line-height: 42upx;
          }

          .iconfont {
            font-size: 20upx;
          }
        }
      }
    }

    .distribution_flex {
      @include flex();
      margin-top: 30upx;
      padding: 30upx;
      width: 690upx;
      background: #ffffff;
      box-shadow: 0px 6upx 12upx rgba(0, 122, 255, 0.05);
      border-radius: 20upx;

      .left_warp {
        .distribution_title {
          font-weight: 700;
        }

        .distribution_title_grey {
          margin-top: 10upx;
        }
      }

      .distribution_btn {
        padding: 10upx 20upx;
        border-radius: 20upx;
        background-color: crimson;
        color: #fff;
      }
    }

    .warp {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

      .rect {
        width: 600upx;
        background-color: #fff;

        .title {
          width: 100%;
          height: 80upx;
          line-height: 80upx;
          font-size: 36upx;
          font-weight: 500;
          text-align: center;
        }

        input {
          width: 100%;
          height: 66upx;
          padding: 0 20upx;
          border-bottom: 2upx solid #ccc;
        }

        .btn_warp {
          height: 80upx;
          @include flex();

          .btn {
            flex: 1;
            height: 100%;
            @include flex(center, center);
          }

          .right {
            color: green;
            border-left: 2upx solid #ccc;
          }
        }
      }
    }
  }

  .modal_input {
    height: 80upx;
    padding: 20upx 30upx;
    border-bottom: 2upx solid #ccc;
  }
}
</style>
